import React from 'react'
import Reflux from 'reflux'
import Action from '../../../action/action'
import Store from '../../../store/store'
import ReactMixin from 'react-mixin'


export default class OrderDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            item : [],
            type : "",
            userOrder : {},
            userInfo : {},
            index : this.props.location.query.index,
            _listIndex :this.props.location.query._listIndex
        }
    }
    componentDidMount(){
        Action.getUserOrder(()=>{
            let _item = [],
                _type = "",
                index = this.state.index,
                userOrder = this.state.userOrder;
            switch (index*1){
                case 0 : _item = userOrder.waitPay; _type ="待付款" ; break;
                case 1 : _item = userOrder.waitSend; _type ="待发货"; break;
                case 2 : _item = userOrder.waitReceipt; _type ="待收货"; break;
                case 3 : _item = userOrder.waitPick; _type ="待自提"; break;
                case 4 : _item = userOrder.waitUse; _type ="待使用"; break;
                case 5 : _item = userOrder.waitEvaluate; _type ="待评价"; break;
                case 6 : _item = userOrder.hadDone; _type ="已完成"; break;
                case 7 : _item = userOrder.hasPass; _type ="已过期"; break;
                case 8 : _item = userOrder.hasCancel; _type ="已取消"; break;
            }
            this.setState({
                item : _item,
                type : _type,
            });
        });
        Action.getUserInfo();

    }
    render(){
        let item = this.state.item,
            type = this.state.type,
            _listIndex = this.state._listIndex,
            addressItem = {},
            addressPhone = "",
            list = [],
            userInfo = this.state.userInfo,
            totalPrice = 0;
        userInfo.userAddress && userInfo.userAddress.map((obj)=>{
            if(obj.isDef){
                addressItem = obj;
                addressPhone = `${obj.phone.substring(0,3)}****${obj.phone.substring(7,11)}`
            }
        });
        item[_listIndex] && item[_listIndex].productList.map((obj,i)=>{
            totalPrice += totalPrice + obj.productPrice*1;
            list.push(
                <div key={i}>
                    <label style={{backgroundImage:`url(${obj.productImage})`}}></label>
                    <div>
                        <p>{obj.productText}</p>
                        <span>
                            <span>
                                ￥{obj.productPrice}
                            </span>
                            <p>x1</p>
                        </span>
                    </div>
                </div>
            )
        })
        return(
            <div className="orderDetail">
                <header>
                    <span>订单编号：{item.length > 0 && item[_listIndex].orderNum}</span>
                    <label>{type}</label>
                </header>
                <section>
                    <div className="orderDetailSend">
                        <span>配送方式</span>
                        <span>{item.length>0 && item[_listIndex].send ? "物流配送" : "到店自提" }</span>
                    </div>
                    <div className="orderDetailAddress">
                        <h4>
                            <span>{addressItem.name}</span>
                            <p>{addressPhone}</p>
                        </h4>
                        <p>{addressItem.address + addressItem.place}</p>
                    </div>
                </section>
                <article>
                    <header>
                        <i className="iconfont icon-weidian"></i>
                        <h4>{item.length>0 && item[_listIndex].merchantName}</h4>
                    </header>
                    <div>
                        {list}
                    </div>
                </article>
                <footer>
                    <p>
                        <span>付款方式：</span>
                        <span>微信支付</span>
                    </p>
                    <p>
                        <span>产品金额：</span>
                        <span>￥{totalPrice}.00</span>
                    </p>
                    <p>
                        <span>立减：</span>
                        <span>-￥20</span>
                    </p>
                    <p>
                        <span>实支付：</span>
                        <span>￥{totalPrice-20}</span>
                    </p>
                    <label >下单时间</label>
                </footer>
                <div className="orderDetailBtn">
                    <span>取消订单</span>
                    <span className="active">付款</span>
                </div>
            </div>
        )
    }
}
ReactMixin.onClass(OrderDetail,Reflux.connect(Store))